<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基础模板</title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			* {
				margin-top: 20px;
			}

			.demo1 {
				height: 60px;
				background-color: deeppink;
			}

			.box1 {
				height: 80px;
				background-color: aqua;
				padding: 5px;
			}

			.box2 {
				height: 40px;
				background-color: deeppink;
			}
			ul{height: 200px;width: 200px;background-color: deeppink;overflow: auto;}
			li{height: 100px;}
		</style>
	</head>
	<body>
		<!-- 创建一个容器 -->
		<div id="box">
			<!-- 1.prevent：阻止默认事件（常用）； -->
			<a href="http:\\www.chaoxing.com" @click.prevent='showMsg'>点我跳转超星</a>
			<!-- 2.stop：阻止事件冒泡（常用）； -->
			<div class="demo1" @click='showMsg'>
				<button type="button" @click.stop='showMsg'>点我提示信息</button>
			</div>
			<!-- 3.once：事件只触发一次（常用）； -->
			<div class="demo1">
				<button type="button" @click.once='showMsg'>点我提示信息</button>
			</div>
			<!-- 4.capture：使用事件的捕获模式； 捕获由外至内，冒泡由内至外-->
			<div class="box1" @click.capture='showMsg1'>
				box1
				<div class="box2" @click='showMsg2'>
					box2
				</div>
			</div>
			<!-- 5.self：只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self='showMsg'>
				<button type="button" @click='showMsg'>点我提示信息</button>
			</div>
			<!-- 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；浏览器之间存在差异，且不是所有的事件都支持 -->
			<ul @wheel='showMsg3'>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示

			// 创建一个vue实例
			new Vue({
				el: '#box',
				data: {

				},
				methods: {
					showMsg() {
						alert('Hello!')
					},
					showMsg1() {
						console.log(1)
					},
					showMsg2() {
						console.log(2)
					},
					showMsg3() {
						for (var i = 0; i < 100000; i++) {
							console.log("@@")
						}
						console.log("终于运行完毕！")
					},
					showMsg4() {//setTimeout是异步调用
						setTimeout(()=>{
							console.log('1分钟到了')
						},10000)
						
					}
				}
			})
		</script>
	</body>
</html>
